<template>
  <div class="sdy-home-grid">
    <van-swipe class="my-swipe box" indicator-color="red">
      <van-swipe-item>
        <van-grid :column-num="5" :gutter="5">
          <van-grid-item class="grid-item" v-for="item in cateList" :key="item.id" :icon="item.img" :text="item.title" />
        </van-grid>
      </van-swipe-item>
      <van-swipe-item>
        <van-grid :column-num="5" :gutter="5">
          <van-grid-item class="grid-item" v-for="item in cateList" :key="item.id" :icon="item.img" :text="item.title" />
        </van-grid>
      </van-swipe-item>
    </van-swipe>
  </div>
</template>

<script name="sdyHomeGrid" setup lang="ts">
import { reactive } from 'vue'

// 自己准备数据
const list = [
  { id: 1, title: '京东超市', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 2, title: '数码电器', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 3, title: '京东百货', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 4, title: '京东生鲜', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/191060/24/12861/6818/60ec11f2E67cf5ee6/c264378678b3cd96.png' },
  { id: 5, title: '京东到家', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 6, title: '京东中心', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 7, title: '附近好点', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 8, title: 'PLUS会员', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 9, title: '京东国籍', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' },
  { id: 0, title: '京东拍卖', img: 'https://m15.360buyimg.com/mobilecms/jfs/t1/187640/12/30456/5256/639c2315Ebc95c142/350a8f0c766f5460.png' }
]

// 自己准备接口
interface CateItemInfo {
  id: number
  img: string
  title: string
}

const cateList: CateItemInfo[] = reactive(list)
</script>

<style lang="scss" scoped>
.sdy-home-grid {
  height: 170px;
  box-sizing: border-box;


  > .box {
    height: 100%;
  }
}

.grid-item {
  height: 65px;
  background-color: transparent;
}
</style>
